<template>
  <div class="sl-form-wrapper">
    <Form v-model:value="form" autocomplete="off" layout="inline">
      <Row :gutter="16">
        <Col :span="6">
          <FormItem label="同步事件" name="keywords">
            <Select v-model:value="keywords" :allowClear="true" :options="syncEvents" placeholder="请选择同步事件"/>
          </FormItem>
        </Col>
        <Col :span="6">
          <Button style="margin-right: 10px" type="primary" @click="getImcSyncLogByKeywords">查询</Button>
          <Button @click="reset">重置</Button>
        </Col>
      </Row>
    </Form>
    <Table
        :columns="imcSyncLogColumns"
        :dataSource="imcSyncLogDataSource"
        :loading="loading"
        :pagination="false"
        :scroll="scroll"
        bordered
        class="main-table"
        show-size-changer
    >
    </Table>
    <br/>
    <Pagination
        v-model:current="current"
        v-model:pageSize="pageSize"
        :show-total="(total) => `共 ${total} 条`"
        :total="total"
        show-size-changer
    />
  </div>
</template>
<script lang="ts" setup>
import {Button, Col, Form, FormItem, Pagination, Row, Select, Table} from 'ant-design-vue';
import {form, imcSyncLogColumns} from '/@/views/integrated-center/imc-sync-log/data';
import {ref, watch} from 'vue';
import {SelectItem} from '../data';
import {ImcSyncLogItem} from '/@/api/integrated-center/model/integratedModel';
import {getImcSyncLogs} from '/@/api/integrated-center/integrated';
import {syncOptions} from './data';

const scroll = ref<undefined | object>(undefined);
const imcSyncLogDataSource = ref<ImcSyncLogItem[]>([]);
const pageSize = ref(10);
let current = ref(1);
const total = ref<number>(0);
const loading = ref(true);
let keywords = ref('');
let syncEvents = ref<SelectItem[]>(syncOptions);

async function getImcSyncLogList() {
  let endTime = new Date();
  let startTime = new Date(endTime).setDate(endTime.getDate() - 30);
  form.startTime = startTime.valueOf().toString();
  form.endTime = endTime.valueOf().toString();
  form.keywords = '集成中心-联营SaaS同步*';
  try {
    await getImcSyncLogs(form).then((res) => {
      imcSyncLogDataSource.value = res.slice((current.value - 1) * pageSize.value, current.value * pageSize.value);
      total.value = res.length;
    });
  } finally {
    loading.value = false;
  }
}

watch(pageSize, (val) => {
  if (val > 10) {
    scroll.value = {y: 500};
  }
  getImcSyncLogList();
});
watch(current, () => {
  getImcSyncLogList();
});

async function getImcSyncLogByKeywords() {
  let endTime = new Date();
  let startTime = new Date(endTime).setDate(endTime.getDate() - 30);
  form.startTime = startTime.valueOf().toString();
  form.endTime = endTime.valueOf().toString();
  form.keywords = keywords.value;
  await getImcSyncLogs(form).then((res) => {
    imcSyncLogDataSource.value = res.slice((current.value - 1) * pageSize.value, current.value * pageSize.value);
    total.value = res.length;
  });
}

// 查询表单重置
async function reset() {
  form.keywords = '集成中心-联营SaaS同步*';
  keywords.value = '';
  getImcSyncLogList();
}

getImcSyncLogList();
</script>
<style lang="less">
.sl-form-wrapper {
  .ant-form-inline {
    flex-direction: column;
  }
}

.ant-pagination {
  float: right;
}
</style>
